<template>
  <div class="member">
    <div class="top">
      <conHeader></conHeader>
    </div>
    <div class="content">
      <!--筛选-->
      <div class="mem_screen cleanFloat">
        <!--会员号-->
        <div class="msc_con cleanFloat">
          <div class="title">会员号</div>
          <div class="asse"><el-input v-model="memberNo" placeholder="请输入会员号"></el-input></div>
        </div>
        <!--时间-->
        <div class="msc_con cleanFloat">
          <div class="title">注册时间</div>
          <div class="asse">
            <el-date-picker
              v-model="start_time"
              type="datetime"
              placeholder="选择日期时间">
            </el-date-picker>
          </div>
        </div>
        <div class="msc_con">-</div>
        <div class="msc_con cleanFloat">
          <div class="asse">
            <el-date-picker
              v-model="end_time"
              type="datetime"
              placeholder="选择日期时间">
            </el-date-picker>
          </div>
        </div>
        <!--只看我推荐的-->
        <div class="msc_con cleanFloat" style="line-height: 40px">
          <div class="asse"><el-checkbox v-model="seeMine">只看我推荐的</el-checkbox></div>
        </div>
        <!--确认按钮-->
        <div class="msc_con cleanFloat" style="line-height: 40px;margin-left: 20px">
          <div class="asse"><el-button type="success" size="mini" @click="getUserList">确认</el-button></div>
        </div>
      </div>
      <!--表单内容-->
      <div class="tableContent">
        <el-table
          :data="tableData"
          style="width: 100%">
          <el-table-column
            prop="userName"
            label="姓名"
            width="120"
            align="center">
          </el-table-column>
          <el-table-column
            prop="userPhone"
            label="手机号"
            width="200"
            align="center">
          </el-table-column>
          <el-table-column
            prop="userNo"
            label="会员卡号"
            width="200"
            align="center">
          </el-table-column>
          <el-table-column
            prop="userStatus"
            label="激活状态"
            width="120"
            align="center">
          </el-table-column>
          <el-table-column
            prop="userIntegral"
            label="积分余额"
            width="120"
            align="center">
          </el-table-column>
          <el-table-column
            prop="userRegisterDate"
            label="注册时间"
            align="center">
          </el-table-column>
        </el-table>
      </div>
      <!--分页-->
      <div class="pagination">
        <el-pagination
          background
          layout="prev, pager, next"
          :total="listTotal"
          @current-change="currentChange">
        </el-pagination>
      </div>
    </div>
  </div>
</template>

<script>
  import {mapGetters,mapActions} from 'vuex'
  import conHeader from '../assembly/conHeader'
    export default {
      name: "member-index",
      components: {
        conHeader,
      },
      data() {
        return {
          memberNo:'', //会员号
          start_time:'', //开始时间
          end_time:'', //结束时间
          seeMine:false, //只看我推荐的
          tableData: [], //会员列表
          listTotal:0, //分页，总条数
          page:1, //当前页
        }
      },
      created() {
        let self = this
        self.getUserList()
      },
      mounted() {
      },
      methods: {
        ...mapActions([
          'upstate'
        ]),
        //获取会员列表
        getUserList(){
          let self = this
          self.$http.post(self.conURL + 'hotel/work/getmemberlist',{
            stime:self.start_time,
            etime:self.end_time,
            card_code:self.memberNo,
            onlyme:self.seeMine,
            page:self.page,
          }).then(res => {
            if (res.data.code == 0){
              let list = res.data.data.data
              let newArr = []
              for (let i = 0; i < list.length; i++){
                let name = ''
                let is_activate = ''
                if (list[i].name != null && list[i].name != undefined && list[i].name != ''){
                  name = list[i].name
                }else {
                  name = list[i].nickname
                }
                if (list[i].is_activate == 0){
                  is_activate = '已激活'
                }else {
                  is_activate = '待激活'
                }
                newArr.push({
                  id:list[i].id,
                  userNo:list[i].card_code, //会员卡号
                  userName: name, //会员姓名
                  userPhone:list[i].phone, //会员电话
                  userStatus:is_activate, //激活状态
                  userIntegral:list[i].bonus, //积分余额
                  userRegisterDate:list[i].created_at //注册时间
                })
              }
              self.tableData = newArr
              self.listTotal = res.data.data.total
            }else {
              self.createMess(res.data.msg)
            }
          })
        },
        //分页：页面选择事件
        currentChange(val) {
          let self = this
          self.page = val
          self.getOrderList()
        },
        /*------------------公用方法获取数据------------------------------------*/
        /*接口请求失败，提示信息*/
        createMess(msg){
          this.$notify.error({
            title: '错误',
            message: msg
          });
        },
      }
    }
</script>

<style lang="less" scoped>
  .member{
    width: 100%;
    height: 100%;
    background: #fff;
    .top{
      width: 100%;
      height: 48px;
      background: #fff;
      -webkit-box-shadow: 0px 3px 3px #dcdfe6;
      box-shadow: 0px 3px 3px #dcdfe6;
      position: absolute;
      top: 0;
      left: 0;
      z-index: 100;
    }
    .content{
      padding-top: 48px;
      .mem_screen{
        width: 100%;
        padding: 15px;
        border-bottom: 1px solid #ebeef5;
        .msc_con{
          float: left;
          margin-right: 10px;
          .title,.asse{
            float: left;
          }
          .title{
            font-size: 14px;
            line-height: 40px;
            margin-right: 10px;
          }
        }
      }
      .tableContent{
        width: 100%;
        margin-top: 10px;
        padding: 0 15px;
        box-sizing: border-box;
      }
      .pagination{
        margin-top: 10px;
        float: right;
      }
    }
  }
</style>
